<template>
  <div>
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-menu :default-openeds="['2']" :router="true">
        <el-submenu :index="item.id + ''" v-for="item in menu" :key="item.id">
          <template slot="title"
            ><i class="el-icon-message"></i>{{ item.auth_name }}</template
          >
          <el-menu-item-group>
            <el-menu-item
              :index="v.auth_path"
              v-for="v in item.children"
              :key="v.id"
              >{{ v.auth_name }}</el-menu-item
            >
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside>
  </div>
</template>

<script>
export default {
  computed: {
    menu() {
      let arr = []
      this.$store.state.leftmenu.forEach((item) => {
        let obj = {
          auth_name: item.auth_name,
          children: [],
          id: item.id
        }
        item.children.forEach((v) => {
          if (!v.auth_name.includes('删除') && !v.auth_name.includes('修改')) {
            obj.children.push(v)
          }
        })
        arr.push(obj)
      })
      return arr
    }
  }
}
</script>

<style lang="scss" scoped>
.el-aside {
  color: #333;
}
</style>
